<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>唯品会</title>
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="" href="css/index.css">
</head>

<body>
    <nav>
        <div class="container">
            <div class="box">
                <!--选择地址  -->
                <div class="local">
                    <a href="#" class="local-henan">
                      <span>河南</span>
                      <span class="sanjiao one"></span>
                    </a>
                    <ul class="local-list">
                         <li id="corver"></li>
                        <p class="list-p">选择你所在的地区</p>
                        <li>A&#x3000;<a href="#">
                            <span>安徽</span>
                            <span>澳门</span>
                             </a></li>
                        <li>B&#x3000;<a href="#">
                            <span>北京</span>
                            <span>保定</span>
                        </a></li>
                        <li>H&#x3000;<a href="#">
                        <span class="henan">河南</span>
                        <span>湖南</span>    
                        </a></li>
                    </ul>
                </div>
                <!--nav 右部导航  -->
        <ul class="nav-list">
                    <li class="login-li"><a href="#" class="login-zi">请登录</a>
                        <ul class="local-list">
                             <li id="corver"></li>
                            <span class="login-tu"></span>&#x3000;
                            <a href="#"><p class="list-p pp">你好！ [请登录]</p></a>
                            <div class="uls">
                                <ul>
                                    <li><a href="#">我的收藏</a></li>
                                    <li><a href="#">零钱</a></li>
                                    <li><a href="#">我的唯品币</a></li>
                                </ul>
                                <ul>
                                    <li><a href="#">我的订单</a></li>
                                    <li><a href="#">我的优惠券</a></li>
                                    <li><a href="#">唯品金融</a></li>
                                </ul>
                            </div>
                        </ul>
                    </li>/
                    <li><a href="" class="login-zi zuce">注册</a></li>/
                    <!--签到  -->
                    <li>
                        <span class="qiandao"></span>
                        <span>签到有礼</span>
                      <div class="signin-info">
                        <ul class="day">
                            <i class="signin-arrow"></i>
                            <li>
                                <i></i>
                                <p>1天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>2天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>3天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>4天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>5天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>6天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>7天</p>
                            </li>
                        </ul>
                        <div class="signin-btn">
                            <a href="javascript:;">每天签到送惊喜， 连续签到更享心动奖励</a>
                            <button type="button" class="button1">签到</button>
                        </div>
                     </div> 
                    </li>/
                    <!--我的订单  -->
                    <li><a href="#" class="login-zi zuce">
                        <span>我的订单</span>
                        <span></span>
                    </a></li>/
                    <!--我的特卖  -->
                    <li class="login-li">
                        <a href="" class="login-zi">
                        <span>我的特卖</span>
                        <span class="sanjiao"></span>
                    </a>
                    <ul class="kefu">
                         <li id="corver"></li>
                            <li><a href="#">品牌收藏(0)</a></li>
                            <li><a href="#">商品收藏(0)</a></li>
                            <li><a href="#">我的足迹(0)</a></li>
                    </ul>
                </li>/
                    <li class="login-li huiyuan"><a href="" class="login-zi">
                      <span>会员俱乐部</span>
                      <span class="sanjiao"></span>   
                    </a>
                        <ul class="kefu">
                             <li id="corver"></li>
                            <li><a href="#">俱乐部首页</a></li>
                            <li><a href="#">唯品币兑换</a></li>
                            <li><a href="#">免费抽大奖</a></li>
                        </ul>
                    </li>/
                    <li class="login-li"><a href="" class="login-zi">
                     <span>客户服务</span>
                     <span class="sanjiao"></span>  
                    </a>
                        <ul class="kefu">
                             <li id="corver"></li>
                            <li><a href="#">联系客服</a></li>
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">服务中心</a></li>
                            <li><a href="#">知识产权投诉</a></li>
                        </ul>
                    </li>/
                    <li class="login-li">
                    <a href="" class="login-zi">
                    <span class="phone"></span>
                    <span>手机版</span>
                    </a>
                       
                     <div class="kefu erweima">
                         <b class="phone-white"></b>
                         <img src="./img/qr.jpg" alt="">
                         <a href="#">随时逛，随时买</a>
                     </div>
                     
                </li>/
                    <li class="login-li"><a href="" class="login-zi">
                    <span>更多</span>
                    <span class="sanjiao"></span> 
                    </a>
                   <div class="kefu more">
                      <b class="more-white"></b>
                     <p>合作专区</p> 
                       <ul>
                       <li><a href="#">联名卡申请</a></li>
                       <li><a href="#">唯品卡</a></li>
                       <li><a href="#">支付专区</a></li>
                   </ul>
                    <hr>
                    <p>合作专区</p>
                    <ul>
                       <li><a href="#">联名卡申请</a></li>
                       <li><a href="#">唯品卡</a></li>
                       <li><a href="#">支付专区</a></li>
                   </ul>
                   </div>
                </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--唯品会logo  -->
    <div class="container">
      <header>
        <div class="header-left">
            <a href="#"><img src="./img/logo.png" alt=""></a>
        </div>
        <ul class="header-right">
          <li><a href="#"><img src="./img/logo_img01.png" alt=""></a></li>
           <li><a href="#"><img src="./img/logo_img02.png" alt=""></a></li>
          <li><a href="#"><img src="./img/logo_img03.png" alt=""></a></li>
           <li class="gouwu-li">
             <a href="#">
                <span class="gouwudai-tu"></span>
                <span class="red">0</span>
                我的购物袋 
            </a>
            <div class="gouwu">
               
                <span>好像还没有登录！</span>
                <a href="#">马上登录</a>
                <span>查看购物袋吧！</span>
            </div>
           </li>
        </ul>
      </header>
    </div>
<!--红色导航条   左部-->
 <nav class="nav-red">
   <div class="container">
     <div class="nav-info">
      <ul class="nav-left">
        <li class="shouye"><a href="#" class="bold">首页</a></li>
        <li><a href="#" class="bold">唯品国际</a></li>
        <li><a href="#" class="bold">母婴</a></li>
        <li><a href="#" class="bold">家具家电</a></li>
        <li><a href="#">男士</a></li>
        <li><a href="#">美妆</a></li>
        <li><a href="#">
            <span class="sun"></span>
            <span>生活超市</span>    
        </a></li>
        <li><a href="#">金融</a></li>
        <li><a href="#">
            <span>更多</span>
            <span class="sanjiao mores"></span>
            </a>
        <!--更多  5张小图  -->
           <div class="change-imgs">
               <ul class="imgs-list">
                   <li><a href="#"><img src="./img/more01.jpg" alt=""></a>
                       <div class="yin"></div>
                       <div class="wenzi">女装</div>
                   </li>
                    <li><a href="#"><img src="./img/more02.jpg" alt=""></a>
                       <div class="yin"></div>
                       <div class="wenzi">鞋包</div>
                   </li>
                    <li><a href="#"><img src="./img/more03.jpg" alt=""></a>
                       <div class="yin"></div>
                       <div class="wenzi">配饰</div>
                   </li>
                    <li><a href="#"><img src="./img/more04.jpg" alt=""></a>
                       <div class="yin"></div>
                       <div class="wenzi">运动</div>
                   </li>
                    <li><a href="#"><img src="./img/more05.jpg" alt=""></a>
                       <div class="yin"></div>
                       <div class="wenzi">唯品·奢</div>
                   </li>
               </ul>
           </div>
        </li>
    </ul>
        <!--导航右部  -->
    <ul class="nav-right">
        <li>
            <span class="fenlei"></span>
            <span>分类</span>
        </li>|
        <li>
            <span class="yugao"></span>
            <span>预告</span>
        </li>
    </ul>
     </div>
   </div>
 </nav>
<div class="big-bg">
    <!--轮播图  -->
   <div class="lunbo">
         <ul class="img-list">
           <li class="current"><a href="#"><img src="./img/lunbo01.jpg" alt=""></a></li>
           <li><a href="#"><img src="./img/lunbo02.jpg" alt=""></a></li>
           <li><a href="#"><img src="./img/lunbo03.jpg" alt=""></a></li>
           <li><a href="#"><img src="./img/lunbo04.jpg" alt=""></a></li>
         
       </ul>
          <ul class="button">
              <li><span class="prev">&lt;</span></li>
              <li><span class="next">&gt;</span></li>
            
            
        </ul>  
         <ul class="indicator">
            <li class="active"><a href="#">时尚风暴 最高满199减40</a></li>
            <li><a href="#">新人专享2重礼</a></li>
            <li><a href="#">净水节 最高500元红包</a></li>
            <li><a href="#">安莉芳集团 跨专场3件8折</a></li>
        </ul>
           
   </div>
</div>
<!--轮播图 下 三张图片  -->
<div class="container">
    <div class="imgs">
        <a href="#"><img src="./img/301.jpg" alt=""></a>
        <a href="#"><img src="./img/302.jpg" alt=""></a>
        <a href="#"><img src="./img/303.jpg" alt=""></a>
    </div>
    <!--新人优选 好货专区  -->
    <div class="zhuanqu">
        <img src="./img/title_v2.jpg" alt="">
    </div>
</div>
<aside>
    <!--右边栏  上半部分  -->
     <ul class="aside">
         <li>
             <i class="fa fa-user"></i>
             <p>账号</p>
            <!--账号 登录框  -->
             <div class="login-zhanghao">
                 <div class="close"></div>
                 <div class="pika">
                     <img src="./img/pika.png" alt="">
                 </div>
                 <div class="pika-zi">
                     <span>你好！请</span>
                     <a href="#">登录</a> 
                      <span>|</span>
                     <a href="#">注册</a>
                 </div>
                <div class="gray">
                    <ul class="dingdan">
                        <li><a href="#" class="dingdan-tu"></a></li>
                        <li><a href="#">我的订单</a></li>
                    </ul>
                    <ul class="dingdan">
                        <li><a href="#" class="xiaoxi-tu"></a></li>
                        <li><a href="#">我的消息</a></li>
                    </ul>
                </div>
                <div class="huiyuan-di">
                    <a href="#">会员俱乐部</a>
                </div>
             </div>
        </li>
         <li><a href="#" class="gouwuche"></a></li>
         <li>
             <i class="fa fa-heart"></i>
         <div class="right-box quan">
             <a href="#">我的优惠券</a>
         </div>
        </li>
         <li>
             <i class="fa fa-heart"></i>
          <div class="right-box pin">
             <a href="#">品牌收藏</a>
         </div>
        </li>
          <li>
              <i class="fa fa-star-o"></i> 
             <div class="right-box shang">
             <a href="#">商品收藏</a>
         </div>
        </li>
         <li>
             <i class="fa fa-history"></i>
             <div class="right-box zu">
             <a href="#">我的足迹</a>
         </div>
        </li>
     </ul>
    <ul class="aside-bottom">
         <li class="fanKui">
            <i class="fa fa-heart"></i>
             <div class="right-box">
             <a href="#">会员反馈</a>
         </div>
        </li>
         <li class="toTop">
             <i class="fa fa-arrow-up"></i>
             <div class="right-box">
             <a href="#">返回顶部</a>
         </div>
    </ul>
</aside>


<footer></footer>
</body>

</html>
<script>
    var local = document.querySelector('.local');
    var localList = document.querySelector('.local .local-list');
    var localHenan = document.querySelector('.local .local-henan');

    local.onmouseover = function () {
        localList.style.display = 'block';
    }
    local.onmouseout = function () {
        localList.style.display = 'none';
    }

    // 轮播图
    var lunbo = document.querySelector('.lunbo');
    var imgLis = document.querySelectorAll('.img-list li');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.button .prev');
    var next = document.querySelector('.button .next');

    
    var index=0;
    var timer = null;
    function showImg(){
        for(var i = 0;i<imgLis.length;i++){
            // imgLis[i].index = i;
             imgLis[i].className = '';
             indicatorLis[i].className = '';
        }
       
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';
    }
    
    timer = setInterval(nextImg,2000);
    function prevImg(){
        index = index == 0 ? imgLis.length - 1 : index - 1;
        showImg();
    }
    function nextImg(){
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg(); 
    }
     //图片跟随指示灯切换
    for(var i = 0;i<indicatorLis.length;i++){
        indicatorLis[i].index = i;
         indicatorLis[i].onmouseover = function(){
             clearInterval(timer);
             timer = null;
             index = this.index;
             showImg();
         }
         indicatorLis[i].onmouseout = function(){
             if (timer != null) {
                 return;
             } else {
                 timer = setInterval(nextImg,1000);
             }
         }
    }
    lunbo.onmouseover = function(){
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style .display = 'block';
    }
    lunbo.onmouseout = function(){
        if (timer != null) {
                 return;
        } else {
                 timer = setInterval(nextImg,1000);
             }
        prev.style.display = 'none';
        next.style .display = 'none';  
    }
    prev.onclick = function(){
        prevImg();
    }
    next.onclick = function(){
        nextImg();
    }


    var mainNav = document.querySelector('.nav-red');
function mainFixed(){
    if (document.scrollingElement.scrollTop >= 130) {
        mainNav.style.position = 'fixed';
        mainNav.style.left = '0';
        if (mainNav.style.top != 0) {
            setTimeout(function(){      
                mainNav.style.top = '0px';
            },100);
        }
    }else{
        mainNav.style.position = 'static';
        mainNav.style.top = -2*mainNav.offsetHeight + 'px';
    }
}
window.onscroll = mainFixed;

var navLis = document.querySelectorAll('.nav-list>li');
for(var i = 0; i < navLis.length; i ++){
    navLis[i].index = i;
    navLis[i].onmouseover = function(){
        if (this.children[1]) {
            this.children[1].children[0].style.width = this.clientWidth + 'px';
        }
        // 当是会员俱乐部的时候
        if(this.index == 5){
            this.children[1].style.width = this.offsetWidth + 'px';
        }
    }
}
var loginZhanghao = document.querySelector('.login-zhanghao');
var close = document.querySelector('.close');
    colse.onclick = function(){
         loginZhanghao.style.left = '-335px';
    }

var toTop = document.querySelector('.toTop');
    toTop.onclick = function(){
         document.documentElement.scrollTop = document.body.scrollTop = '0';
    }





</script>